<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级创建系统 - Excel智能解析</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
            min-height: 100vh;
            padding: 20px;
            color: #2c3e50;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 20px;
            border-bottom: 2px solid #3498db;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .logo i {
            font-size: 2.2rem;
            color: #3498db;
        }
        
        .logo h1 {
            font-size: 1.8rem;
            color: #2c3e50;
            background: linear-gradient(90deg, #3498db, #2c3e50);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
        }
        
        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }
        
        .back-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
        }
        
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        .card-header {
            background: linear-gradient(90deg, #3498db, #2c3e50);
            color: white;
            padding: 20px 30px;
        }
        
        .card-header h2 {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .card-body {
            padding: 25px;
        }
        
        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            margin-bottom: 25px;
        }
        
        .form-group {
            flex: 1;
            min-width: 280px;
        }
        
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #2c3e50;
            font-size: 1rem;
        }
        
        .form-control {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid #d1e8ff;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #f8fbfe;
        }
        
        .form-control:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
            outline: none;
            background: white;
        }
        
        .file-upload {
            border: 2px dashed #3498db;
            border-radius: 10px;
            padding: 25px;
            text-align: center;
            background: #f0f8ff;
            transition: all 0.3s ease;
            cursor: pointer;
            margin-top: 12px;
        }
        
        .file-upload:hover {
            background: #e1f0ff;
            border-color: #2980b9;
        }
        
        .file-upload i {
            font-size: 3rem;
            color: #3498db;
            margin-bottom: 15px;
        }
        
        .file-info {
            margin-top: 20px;
            padding: 15px;
            background: #e1f0ff;
            border-radius: 10px;
            display: none;
            border-left: 4px solid #3498db;
        }
        
        .preview-section {
            margin-top: 35px;
            border-top: 2px solid #e1f0ff;
            padding-top: 25px;
        }
        
        .preview-container {
            max-height: 400px;
            overflow: auto;
            margin-top: 20px;
            border: 1px solid #d1e8ff;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
        }
        
        th, td {
            padding: 14px;
            text-align: left;
            border-bottom: 1px solid #e1f0ff;
        }
        
        th {
            background-color: #3498db;
            color: white;
            position: sticky;
            top: 0;
            font-weight: 600;
        }
        
        tr:nth-child(even) {
            background-color: #f8fbfe;
        }
        
        tr:hover {
            background-color: #e1f0ff;
        }
        
        .btn-container {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 30px;
        }
        
        .btn {
            padding: 14px 30px;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .btn-primary {
            background: linear-gradient(90deg, #3498db, #2c3e50);
            color: white;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(52, 152, 219, 0.4);
        }
        
        .btn-secondary {
            background: #f8fbfe;
            color: #2c3e50;
            border: 2px solid #d1e8ff;
        }
        
        .btn-secondary:hover {
            background: #e1f0ff;
        }
        
        .action-btn {
            padding: 7px 12px;
            border-radius: 6px;
            font-size: 0.85rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s ease;
            border: none;
        }
        
        .edit-btn {
            background-color: #3498db;
            color: white;
        }
        
        .edit-btn:hover {
            background-color: #2980b9;
        }
        
        .delete-btn {
            background-color: #e74c3c;
            color: white;
            margin-left: 6px;
        }
        
        .delete-btn:hover {
            background-color: #c0392b;
        }
        
        .note-box {
            background: #fff8e1;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin-top: 20px;
            border-radius: 0 10px 10px 0;
        }
        
        .note-box h4 {
            color: #e67e22;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.1rem;
        }
        
        .note-box ul {
            padding-left: 20px;
        }
        
        .note-box li {
            margin-bottom: 10px;
            line-height: 1.5;
            font-size: 0.95rem;
        }
        
        .required::after {
            content: " *";
            color: #e74c3c;
        }
        
        .success-message {
            background: #e8f5e9;
            border-left: 4px solid #4caf50;
            padding: 15px;
            margin-top: 20px;
            border-radius: 0 10px 10px 0;
            display: none;
        }
        
        .summary-card {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 25px;
        }
        
        .summary-item {
            flex: 1;
            min-width: 220px;
            padding: 20px;
            border-radius: 10px;
            background: #f8fbfe;
            border: 2px solid #d1e8ff;
            text-align: center;
        }
        
        .summary-item i {
            font-size: 2rem;
            margin-bottom: 12px;
        }
        
        .summary-item.success i {
            color: #27ae60;
        }
        
        .summary-item.info i {
            color: #3498db;
        }
        
        .summary-item h3 {
            font-size: 1.3rem;
            margin-bottom: 8px;
            color: #2c3e50;
        }
        
        .summary-item p {
            font-size: 1rem;
            color: #7f8c8d;
        }
        
        .deleting {
            animation: fadeOut 0.4s forwards;
        }
        
        @keyframes fadeOut {
            0% { opacity: 1; transform: translateX(0); }
            100% { opacity: 0; transform: translateX(-50px); }
        }
        
        .confirmation-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            display: none;
        }
        
        .dialog-content {
            background: white;
            border-radius: 12px;
            padding: 25px;
            width: 90%;
            max-width: 450px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .dialog-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }
        
        .dialog-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
        }
        
        .confirm-delete {
            background: #e74c3c;
            color: white;
        }
        
        .confirm-delete:hover {
            background: #c0392b;
        }
        
        .cancel-delete {
            background: #ecf0f1;
            color: #2c3e50;
        }
        
        .cancel-delete:hover {
            background: #d1e8ff;
        }
        
        @media (max-width: 768px) {
            .form-row {
                flex-direction: column;
                gap: 20px;
            }
            
            .btn-container {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
            
            .action-btns {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            
            .delete-btn {
                margin-left: 0;
            }
            
            header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            
            .logo {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <h1>班级创建系统 - Excel智能解析</h1>
            </div>
            <a href="dashboard.html" class="back-btn">
                <i class="fas fa-arrow-left"></i> 返回控制面板
            </a>
        </header>
        
        <main>
            <div class="card">
                <div class="card-header">
                    <h2><i class="fas fa-file-excel"></i> 从Excel文件创建班级</h2>
                </div>
                
                <div class="card-body">
                    <form id="createClassForm">
                        <div class="summary-card">
                            <div class="summary-item success">
                                <i class="fas fa-users"></i>
                                <h3 id="studentCount">0</h3>
                                <p>学生数量</p>
                            </div>
                            
                            <div class="summary-item info">
                                <i class="fas fa-chalkboard-teacher"></i>
                                <h3 id="classNameDisplay">未解析</h3>
                                <p>班级名称</p>
                            </div>
                            
                            <div class="summary-item info">
                                <i class="fas fa-book"></i>
                                <h3 id="courseNameDisplay">未解析</h3>
                                <p>课程名称</p>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="className" class="required">班级名称</label>
                                <input type="text" id="className" class="form-control" placeholder="例如：22网络3班" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="semester" class="required">学期</label>
                                <input type="text" id="semester" class="form-control" placeholder="例如：2024-2025-1" required>
                                <small style="display: block; margin-top: 8px; color: #7f8c8d;">
                                    格式: 起始年份-结束年份-学期(1/2/3)
                                </small>
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group">
                                <label for="courseCode" class="required">课程代码</label>
                                <input type="text" id="courseCode" class="form-control" placeholder="例如：CS3207" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="courseName" class="required">课程名称</label>
                                <input type="text" id="courseName" class="form-control" placeholder="例如：计算机系统基础" required>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="required">上传学生考勤表</label>
                            <div class="file-upload" id="fileUploadArea">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <h3>点击或拖拽Excel文件到此处</h3>
                                <p>支持 .xls 或 .xlsx 格式</p>
                                <input type="file" id="studentsFile" accept=".xls,.xlsx" style="display: none;">
                            </div>
                            
                            <div class="file-info" id="fileInfo">
                                <p><strong>文件名:</strong> <span id="fileName"></span></p>
                                <p><strong>文件大小:</strong> <span id="fileSize"></span></p>
                                <p><strong>解析状态:</strong> <span id="parseStatus">等待上传</span></p>
                            </div>
                        </div>
                        
                        <div class="note-box">
                            <h4><i class="fas fa-info-circle"></i> 上传要求与解析说明</h4>
                            <ul>
                                <li>系统将自动解析学年学期、课程代码、课程名称和学生名单</li>
                                <li>班级名称将以最后一个学生的班级信息为准</li>
                                <li>Excel文件必须包含学号、姓名和班级列</li>
                                <li>第一行为标题行，包含列名</li>
                                <li>支持多Sheet页，系统将自动识别第一个Sheet</li>
                                <li>可手动编辑或删除学生信息</li>
                            </ul>
                        </div>
                        
                        <div class="preview-section">
                            <h3><i class="fas fa-list-ol"></i> 学生名单预览</h3>
                            <p>以下为检测到的学生名单，请确认信息正确：</p>
                            
                            <div class="preview-container">
                                <table id="studentsPreview">
                                    <thead>
                                        <tr>
                                            <th>学号</th>
                                            <th>姓名</th>
                                            <th>班级</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- 预览数据将通过JavaScript动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <div class="success-message" id="successMessage">
                            <h3><i class="fas fa-check-circle"></i> 解析成功！</h3>
                            <p>系统已成功从Excel文件中提取所有必要信息，请检查并确认。</p>
                        </div>
                        
                        <div class="btn-container">
                            <button type="reset" class="btn btn-secondary" id="resetBtn">
                                <i class="fas fa-redo"></i> 重置表单
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 创建班级
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </main>
        
        <!-- 删除确认对话框 -->
        <div class="confirmation-dialog" id="confirmationDialog">
            <div class="dialog-content">
                <h3><i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> 确认删除</h3>
                <p>您确定要删除学生 <strong id="studentToDeleteName"></strong> (学号: <strong id="studentToDeleteId"></strong>) 吗？</p>
                <p class="warning-text">此操作不可撤销！</p>
                <div class="dialog-buttons">
                    <button class="dialog-btn cancel-delete" id="cancelDeleteBtn">取消</button>
                    <button class="dialog-btn confirm-delete" id="confirmDeleteBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fileUploadArea = document.getElementById('fileUploadArea');
            const fileInput = document.getElementById('studentsFile');
            const fileInfo = document.getElementById('fileInfo');
            const fileName = document.getElementById('fileName');
            const fileSize = document.getElementById('fileSize');
            const parseStatus = document.getElementById('parseStatus');
            const studentsPreview = document.querySelector('#studentsPreview tbody');
            const classNameInput = document.getElementById('className');
            const semesterInput = document.getElementById('semester');
            const courseCodeInput = document.getElementById('courseCode');
            const courseNameInput = document.getElementById('courseName');
            const studentCountEl = document.getElementById('studentCount');
            const classNameDisplay = document.getElementById('classNameDisplay');
            const courseNameDisplay = document.getElementById('courseNameDisplay');
            const successMessage = document.getElementById('successMessage');
            const resetBtn = document.getElementById('resetBtn');
            
            // 删除对话框元素
            const confirmationDialog = document.getElementById('confirmationDialog');
            const studentToDeleteName = document.getElementById('studentToDeleteName');
            const studentToDeleteId = document.getElementById('studentToDeleteId');
            const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
            const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
            
            // 存储解析后的数据
            let studentData = [];
            let lastClassName = '';
            let studentToDeleteIndex = -1;
            
            // 文件上传区域点击事件
            fileUploadArea.addEventListener('click', function() {
                fileInput.click();
            });
            
            // 拖放功能
            fileUploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                this.style.borderColor = '#2980b9';
                this.style.backgroundColor = '#d1e8ff';
            });
            
            fileUploadArea.addEventListener('dragleave', function() {
                this.style.borderColor = '#3498db';
                this.style.backgroundColor = '#f0f8ff';
            });
            
            fileUploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                this.style.borderColor = '#3498db';
                this.style.backgroundColor = '#f0f8ff';
                
                if (e.dataTransfer.files.length) {
                    fileInput.files = e.dataTransfer.files;
                    handleFileUpload(e.dataTransfer.files[0]);
                }
            });
            
            // 文件选择事件
            fileInput.addEventListener('change', function() {
                if (this.files.length) {
                    handleFileUpload(this.files[0]);
                }
            });
            
            // 处理文件上传
            function handleFileUpload(file) {
                if (!file.name.match(/\.(xls|xlsx)$/i)) {
                    alert('请上传Excel文件（.xls 或 .xlsx 格式）');
                    return;
                }
                
                // 显示文件信息
                fileName.textContent = file.name;
                fileSize.textContent = formatFileSize(file.size);
                parseStatus.textContent = '解析中...';
                parseStatus.style.color = '#e67e22';
                fileInfo.style.display = 'block';
                
                // 读取并解析Excel
                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        const data = new Uint8Array(e.target.result);
                        const workbook = XLSX.read(data, { type: 'array' });
                        
                        // 获取第一个工作表
                        const firstSheetName = workbook.SheetNames[0];
                        const worksheet = workbook.Sheets[firstSheetName];
                        
                        // 转换为JSON数组
                        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
                        
                        // 1. 解析学期 (第1行索引0，第3列索引3)
                        const semester = jsonData[1] && jsonData[1][3] ? jsonData[1][3].toString().trim() : '';
                        
                        // 2. 解析课程代码 (第1行索引0，第9列索引9)
                        const courseCode = jsonData[1] && jsonData[1][9] ? jsonData[1][9].toString().trim() : '';
                        
                        // 3. 解析课程名称 (第1行索引0，第16列索引16)
                        const courseName = jsonData[1] && jsonData[1][16] ? jsonData[1][16].toString().trim() : '';
                        
                        // 4. 解析开课学院
                        const faculty = jsonData[2] && jsonData[2][9] ? jsonData[2][9].toString().trim() : '';
                        console.log("解析出来的开课学院为", faculty);

                        // 5. 解析学生数据
                        studentData = [];
                        lastClassName = '';
                        
                        // 学生数据从第5行开始 (索引4)
                        for (let i = 5; i < jsonData.length; i++) {
                            const row = jsonData[i];
                            if (row && row[0] && row[1]) {
                                const studentId = row[0].toString().trim();
                                const studentName = row[1].toString().trim();
                                const className = row[3] ? row[3].toString().trim() : '';
                                
                                if (studentId && studentName) {
                                    studentData.push({
                                        studentId,
                                        studentName,
                                        className
                                    });
                                    
                                    // 记录最后一个班级名称
                                    if (className) {
                                        lastClassName = className;
                                    }
                                }
                            }
                        }
                        
                        // 更新表单字段
                        if (semester) semesterInput.value = semester;
                        if (courseCode) courseCodeInput.value = courseCode;
                        if (courseName) courseNameInput.value = courseName;
                        if (lastClassName) classNameInput.value = lastClassName;
                        
                        // 更新显示
                        classNameDisplay.textContent = lastClassName || '未解析';
                        courseNameDisplay.textContent = courseName || '未解析';
                        studentCountEl.textContent = studentData.length;
                        
                        // 显示学生预览
                        renderStudentPreview();
                        
                        // 显示成功消息
                        parseStatus.textContent = '解析成功！';
                        parseStatus.style.color = '#27ae60';
                        successMessage.style.display = 'block';
                        
                    } catch (error) {
                        console.error('Excel解析错误:', error);
                        parseStatus.textContent = '解析失败: ' + error.message;
                        parseStatus.style.color = '#e74c3c';
                        alert('Excel文件解析失败: ' + error.message);
                    }
                };
                reader.readAsArrayBuffer(file);
            }
            
            // 渲染学生预览
            function renderStudentPreview() {
                studentsPreview.innerHTML = '';
                
                if (studentData.length === 0) {
                    studentsPreview.innerHTML = `
                        <tr>
                            <td colspan="4" style="text-align: center; padding: 25px;">
                                <i class="fas fa-exclamation-circle" style="font-size: 1.8rem; color: #95a5a6; margin-bottom: 12px;"></i>
                                <p>未检测到学生数据</p>
                            </td>
                        </tr>
                    `;
                    return;
                }
                
                studentData.forEach((student, index) => {
                    const tr = document.createElement('tr');
                    tr.setAttribute('data-index', index);
                    tr.innerHTML = `
                        <td>${student.studentId}</td>
                        <td>${student.studentName}</td>
                        <td>${student.className || '-'}</td>
                        <td class="action-btns">
                            <button class="action-btn edit-btn" data-index="${index}">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button class="action-btn delete-btn" data-index="${index}">
                                <i class="fas fa-trash-alt"></i> 删除
                            </button>
                        </td>
                    `;
                    studentsPreview.appendChild(tr);
                });
                
                // 添加编辑事件
                document.querySelectorAll('.edit-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const index = this.getAttribute('data-index');
                        editStudent(index);
                    });
                });
                
                // 添加删除事件
                document.querySelectorAll('.delete-btn').forEach(btn => {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const index = this.getAttribute('data-index');
                        showDeleteConfirmation(index);
                    });
                });
            }
            
            // 显示删除确认对话框
            function showDeleteConfirmation(index) {
                const student = studentData[index];
                studentToDeleteName.textContent = student.studentName;
                studentToDeleteId.textContent = student.studentId;
                studentToDeleteIndex = index;
                confirmationDialog.style.display = 'flex';
            }
            
            // 确认删除
            confirmDeleteBtn.addEventListener('click', function() {
                if (studentToDeleteIndex >= 0) {
                    deleteStudent(studentToDeleteIndex);
                    confirmationDialog.style.display = 'none';
                }
            });
            
            // 取消删除
            cancelDeleteBtn.addEventListener('click', function() {
                confirmationDialog.style.display = 'none';
                studentToDeleteIndex = -1;
            });
            
            // 删除学生
            function deleteStudent(index) {
                const studentRow = document.querySelector(`tr[data-index="${index}"]`);
                if (studentRow) {
                    // 添加删除动画
                    studentRow.classList.add('deleting');
                    
                    // 动画结束后删除
                    setTimeout(() => {
                        // 从数组中删除
                        studentData.splice(index, 1);
                        
                        // 更新班级名称（如果是最后一个学生）
                        if (index === studentData.length && studentData.length > 0) {
                            // 重新计算最后一个班级名称
                            lastClassName = '';
                            studentData.forEach(student => {
                                if (student.className) {
                                    lastClassName = student.className;
                                }
                            });
                            
                            classNameInput.value = lastClassName;
                            classNameDisplay.textContent = lastClassName || '未解析';
                        }
                        
                        // 更新学生数量
                        studentCountEl.textContent = studentData.length;
                        
                        // 重新渲染表格
                        renderStudentPreview();
                        
                        // 如果没有学生了，清空班级名称
                        if (studentData.length === 0) {
                            classNameInput.value = '';
                            classNameDisplay.textContent = '未解析';
                        }
                    }, 500);
                }
            }
            
            // 编辑学生信息
            function editStudent(index) {
                const student = studentData[index];
                const newId = prompt('请输入学号:', student.studentId);
                const newName = prompt('请输入姓名:', student.studentName);
                const newClass = prompt('请输入班级:', student.className);
                
                if (newId !== null && newName !== null) {
                    student.studentId = newId.trim();
                    student.studentName = newName.trim();
                    student.className = newClass ? newClass.trim() : '';
                    
                    // 如果是最后一个学生，更新班级名称
                    if (index === studentData.length - 1 && newClass) {
                        classNameInput.value = newClass.trim();
                        classNameDisplay.textContent = newClass.trim();
                    }
                    
                    renderStudentPreview();
                }
            }
            
            // 格式化文件大小
            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }
            
            // 表单提交
            document.getElementById('createClassForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 获取表单数据
                const className = classNameInput.value.trim();
                const semester = semesterInput.value.trim();
                const courseCode = courseCodeInput.value.trim();
                const courseName = courseNameInput.value.trim();
                
                // 简单验证
                if (!className || !semester || !courseCode || !courseName) {
                    alert('请填写所有必填字段');
                    return;
                }
                
                if (studentData.length === 0) {
                    alert('未检测到学生数据，请上传有效的Excel文件');
                    return;
                }
                
                // 验证学期格式
                if (!/^\d{4}-\d{4}-[1-3]$/.test(semester)) {
                    alert('学期格式不正确，应为YYYY-YYYY-1/2/3格式');
                    return;
                }
                
                // 准备提交数据
                const formData = {
                    className,
                    semester,
                    courseCode,
                    courseName,
                    students: studentData
                };
                
                // 显示加载状态
                const submitBtn = document.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 创建中...';
                submitBtn.disabled = true;
                
                // 获取认证token
                const token = localStorage.getItem('authToken') || sessionStorage.getItem('authToken');
                
                if (!token) {
                    alert('登录凭证已过期，请重新登录');
                    window.location.href = 'index.html';
                    return;
                }
                
                // 发送创建请求
                axios.post('/api/teacher/create-class', formData, {
                    headers: {
                        Authorization: `Bearer ${token}`
                    }
                })
                .then(response => {
                    if (response.status === 201) {
                        // 创建成功，重定向回dashboard
                        alert(`班级"${className}"创建成功！共导入${studentData.length}名学生`);
                        window.location.href = 'dashboard.html?created=true';
                    } else {
                        throw new Error('创建班级失败');
                    }
                })
                .catch(error => {
                    console.error('创建班级失败:', error);
                    alert('创建班级失败: ' + (error.response?.data?.message || error.message));
                })
                .finally(() => {
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                });
            });
            
            // 重置表单
            resetBtn.addEventListener('click', function() {
                studentData = [];
                lastClassName = '';
                renderStudentPreview();
                fileInfo.style.display = 'none';
                successMessage.style.display = 'none';
                studentCountEl.textContent = '0';
                classNameDisplay.textContent = '未解析';
                courseNameDisplay.textContent = '未解析';
            });
        });
    </script>
</body>
</html>